<%-- 
    Document   : create_look
    Created on : Aug 18, 2013, 8:26:36 PM
    Author     : Tung An
--%>

<%@page contentType="text/html" pageEncoding="UTF-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="css/core.css">
    <link rel="stylesheet" type="text/css" href="css/popup.css">
    <link rel="stylesheet" type="text/css" href="css/main_page.css">
    <link rel="stylesheet" type="text/css" href="css/create_page.css">
    <link rel="stylesheet" type="text/css" href="css/header.css">
    <link rel="stylesheet" type="text/css" href="css/login_popup.css">

    <script type="text/javascript" src="js/utils.js"></script>
    <script type="text/javascript" src="js/core.js"></script>
    <script type="text/javascript" src="js/header.js"></script>
    <script type="text/javascript" src="js/login_popup.js"></script>
    <script type="text/javascript" src="js/upload.js"></script>
    <title>Create Look - Fashion Zone</title>
</head>

<jsp:include page="header.jsp"/>
<div id="popup" class="popup hidden" data="popup">
    <jsp:include page="popup/login.jsp"/>
</div>
<jsp:include page="popup/popup.jsp"/>
<div id="create-look" class="wrapper box create">
    <div class="look-caption page-title">Create your own look</div>
    <div id="image-container" data="img" class="panel left">
        <div class="look-caption">Click to add tags</div>
        <div id="image-look">
            <c:set var="imgURL" value="${sessionScope.img}"/>
            <img src="${imgURL}"/>
        </div>
        <div id="tag-container" class="tag-container"></div>
    </div>
    <div class="panel right">
        <div class="info-wrapper">
            <div class="look-caption">Name this look</div>
            <input type="text" name="lookName" placeholder="Enter the name" class="common-input"/>

            <div class="look-caption">Put the description</div>
            <textarea class="common-input description" name="lookDescription"
                      placeholder="Enter the description"></textarea>
        </div>
        <div class="button-wrapper">
            <div id="submit-button" class="button" data="submit">Create</div>
        </div>
    </div>

    <div class="hidden">
        <div id="tag-template" data="tag" class="create-template">
            <div class="tag" name="tagIndex">1</div>
            <div class="tag-content box clearfix">
                <div class="close-button" data="close"></div>
                <input type="text" name="tagName" placeholder="Name (Required)" class="common-input">
                <input type="text" name="tagBrand" placeholder="Brand Name" class="common-input">
                <input type="text" name="tagStore" placeholder="Store Name" class="common-input">
                <input type="text" name="tagStoreUrl" placeholder="Store URL" class="common-input">
                <select name="category">
                    <option selected disabled>Category</option>
                    <option value="1">Boots</option>
                    <option value="2">Coats</option>
                    <option value="3">Hats</option>
                    <option value="4">Pants</option>
                    <option value="5">Shirts</option>
                    <option value="6">Shoes</option>
                    <option value="7">Accessories</option>
                </select>

                <div class="tag-image" data="tag-image">
                    <div class="close-button delete-image hidden" data="delete-image"></div>
                    <div class="upload-button">
                        <input type="file" id="tag-image-upload" style="position: absolute; visibility: hidden;">
                        <a id="file-action" data="productImageUpload" onclick="$id('tag-image-upload').click();">Upload
                            your
                            product image</a>
                    </div>
                    <div class="image-wrapper">
                    </div>
                </div>
                <div class="button create-tag delete" data="delete"></div>
                <div class="button create-tag" data="create">Save</div>
            </div>
        </div>

        <div id="tag-node" class="tag tag-node " data="tagNode">1</div>
    </div>
</div>

</html>
